<template>
  <uni-nav-bar title="商品详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package space-between" v-if="inFor">
    <image :src="inFor.image" mode=""></image>
    <view class="direction-start illustrate">
      <view style="color:#333;font-size: 30rpx;">{{inFor.name}}</view>
    </view>
  </view>
  <view class="package space-between" style="color:#666;" v-if="inFor">
    <view>用户</view>
    <view>{{inFor.driver_name}}</view>
  </view>
  <view class="package" style="color:#666;" v-if="inFor">
    <view class="space-between">
      <view>兑换时间</view>
      <view>{{inFor.createtime}}</view>
    </view>
    <view class="space-between top" v-if="inFor.updatetime">
      <view>发放时间</view>
      <view>{{inFor.updatetime}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getHexiaoInfo } from '@/gql/welfareVoucher';
  import { showLoading } from '@/utils/prompt';
  const orderID = ref()
  const inFor = ref()
  const shopID = ref()
  onLoad((pearm) => {
    orderID.value = Number(pearm.id)
    shopID.value=Number(pearm.shopID)
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getHexiaoInfo,
      variables: {
        order_id: orderID.value,
        store_id: shopID.value,
      },
    };
    toPublish(
      'ql/store/getHexiaoInfo',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getHexiaoInfo } = obj.data;
        inFor.value = getHexiaoInfo
      }
    );
  }
</script>
<style scoped lang="less">
  .package {
    image {
      width: 142rpx;
      height: 142rpx;
      // background: #FF7B48;
      border-radius: 10rpx;
    }

    .illustrate {
      width: 76%;
      font-size: 24rpx;
      color: #666666;
      height: 142rpx;
      justify-content: space-between;
    }
  }

  .top {
    margin-top: 15rpx;
  }
</style>